<template>
  <div class="form">
    <h3>立刻领现金</h3>
    <form @submit.prevent="validateBeforeSubmit" novalidate>
      <div class="form-item">
        <input :class="{'input': true, 'is-danger': errors.has('mobile')}" name="mobile" placeholder="请输入手机号" type="text" v-model="form.mobile" v-validate="'required|mobile'">
        <span v-show="errors.has('mobile')" class="danger-info">{{ errors.first('mobile') }}</span>
      </div>
      <div class="form-item">
        <input :class="{'input': true, 'is-danger': errors.has('code')}" name="code" placeholder="请输入验证码" type="text" v-model="form.code" v-validate="'required'">
        <span v-show="errors.has('code')" class="danger-info">{{ errors.first('code') }}</span>
      </div>
      <div class="form-item">
        <button type="submit">提交</button>
      </div>
    </form>
  </div>
</template>

<script>
    export default {
        name: "VeeValidate",
        data () {
          return {
            form: {
              mobile: '',
              code: ''
            }
          }
        },
        methods: {
          validateBeforeSubmit () {
            this.$validator.validateAll().then((result) => {
              if (result) {
                alert('Form Submitted!')
                return
              }
            })
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .form{
    padding: 0 13.33%;
    h3{
      font-size: pxToRem(36);
      line-height: pxToRem(50);
      color: #4A4A4A;
      text-align: center;
      padding-bottom: pxToRem(32);
    }
    .form-item{
      height: pxToRem(112);
      display: flex;
      flex-direction: column;
      .input{
        height: pxToRem(80);
        border: 1px solid #D8D7D7;
        border-radius: pxToRem(40);
        padding-left: pxToRem(24);
        width: 100%;
        box-sizing: border-box;
      }
      .is-danger{
        border: 1px solid #FB7D77;
      }
      .danger-info{
        display: inline-block;
        font-size: pxToRem(22);
        color: #F20000;
        line-height: pxToRem(32);
        height: pxToRem(32);
        padding-left: pxToRem(24);
      }
      button{
        width: 100%;
        box-sizing: border-box;
        height: pxToRem(80);
        line-height: pxToRem(80);
        color: #ffffff;
        font-size: pxToRem(36);
        background: #FB7D77;
        box-shadow: 0 pxToRem(8) pxToRem(6) pxToRem(1) rgba(249,182,180,0.60);
        border-radius: pxToRem(40);
        border: none;
      }
    }
  }
</style>
